{% extends "base.html" %}
{% block title %}Asset Maintenance{% endblock %}
{% block content %}

{% block subnav %}
	{% include "subnav.html" %}
{% endblock %}

<div class="d-flex justify-content-between align-items-center mt-3 mb-3">
	<h1>Asset Maintenance</h1>
	<a href="#addMaintenanceSection" id="toggleAddMaintenanceBtn" class="btn btn-success"
	   data-bs-toggle="collapse" data-bs-target="#maintenanceTable,#addMaintenanceSection"
	   aria-expanded="false">
		<i class="bi bi-plus-circle"></i> Add Maintenance
	</a>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
	{% if messages %}
		{% for category, msg in messages %}
			<div class="alert alert-{{ category }} mt-2">{{ msg }}</div>
		{% endfor %}
	{% endif %}
{% endwith %}

<!-- Add Maintenance Section -->
<div class="collapse" id="addMaintenanceSection">
	<h2>Add Maintenance Record</h2>

	<!-- CSV Upload -->
	<div class="card mb-4">
		<div class="card-body">
			<h5>Upload from CSV</h5>
			<form action="{{ url_for('asset_maintenance.asset_maintenance') }}" method="POST" enctype="multipart/form-data">
				<div class="mb-3">
					<input type="file" class="form-control" id="csv_file" name="csv_file" accept=".csv" required>
					<div class="form-text">Only .csv files are supported.</div>
				</div>
				<button type="submit" class="btn btn-primary">Upload CSV</button>
			</form>
		</div>
	</div>

	<div class="card mb-4">
		<div class="card-body">
			<form method="post">
				<div class="row g-3">
					<div class="col-md-6">
						<label for="asset_id" class="form-label">Asset *</label>
						<select id="asset_id" name="asset_id" class="form-select" required>
							{% for asset in assets %}
								<option value="{{ asset.asset_id }}">{{ asset.asset_tag }} - {{ asset.name }}</option>
							{% endfor %}
						</select>
					</div>

					<div class="col-md-6">
						<label for="maintenance_date" class="form-label">Maintenance Date *</label>
						<input id="maintenance_date" name="maintenance_date" type="date" class="form-control" required>
					</div>

					<div class="col-md-12">
						<label for="description" class="form-label">Description</label>
						<textarea id="description" name="description" class="form-control"></textarea>
					</div>

					<div class="col-md-6">
						<label for="performed_by" class="form-label">Performed By</label>
						<input id="performed_by" name="performed_by" class="form-control">
					</div>

					<div class="col-md-3">
						<label for="cost" class="form-label">Cost</label>
						<input id="cost" name="cost" type="number" step="0.01" class="form-control">
					</div>

					<div class="col-md-3">
						<label for="next_due_date" class="form-label">Next Due Date</label>
						<input id="next_due_date" name="next_due_date" type="date" class="form-control">
					</div>
				</div>

				<div class="mt-4">
					<button type="submit" class="btn btn-success">Add Maintenance</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- Maintenance Table -->
<div class="collapse show" id="maintenanceTable">

	<!-- Search Bar -->
	<form method="get" action="{{ url_for('asset_maintenance.asset_maintenance') }}" class="mb-3 d-flex">
	<input type="text" name="search" class="form-control me-2"
	       placeholder="Search asset maintenance..."
	       value="{{ request.args.get('search', '') }}">
	<button type="submit" class="btn btn-primary">Search</button>
	</form>

	<table class="table table-striped align-middle">
		<thead class="table-light">
			<tr>
				{% set columns = [
					('maintenance_id', 'ID'),
					('asset.asset_tag', 'Asset'),
					('maintenance_date', 'Date'),
					('description', 'Description'),
					('performed_by', 'Performed By'),
					('cost', 'Cost'),
					('next_due_date', 'Next Due')
				] %}
				{% for field, label in columns %}
					<th class="fw-bold text-nowrap">
						<a href="?sort={{ field }}&direction={{ 'desc' if sort == field and direction == 'asc' else 'asc' }}&search={{ request.args.get('search', '') }}"
   							class="text-dark text-decoration-none text-nowrap">
							{{ label }}
							{% if sort == field %}
								{{ '↑' if direction == 'asc' else '↓' }}
							{% endif %}
						</a>
					</th>
				{% endfor %}
				<th class="fw-bold text-nowrap">Actions</th>
			</tr>
		</thead>
		<tbody>
			{% for maintenance in maintenances %}
				<tr>
					<td>{{ maintenance.maintenance_id }}</td>
					<td><a href="{{ url_for('assets.assets', search=maintenance.asset.asset_tag) }}">
						{{ maintenance.asset.asset_tag }}
					</a></td>
					<td>{{ maintenance.maintenance_date }}</td>
					<td>{{ maintenance.description or '' }}</td>
					<td>{{ maintenance.performed_by or '' }}</td>
					<td>{{ maintenance.cost or '' }}</td>
					<td>{{ maintenance.next_due_date or '' }}</td>
					<td>
						<!-- Collapsible Button -->
						<a class="btn btn-sm btn-secondary"
						   data-bs-toggle="collapse"
						   href="#editAssetMaintenance{{ maintenance.maintenance_id }}"
						   role="button"
						   aria-expanded="false"
						   aria-controls="editAssetMaintenance{{ maintenance.maintenance_id }}">
							Edit
						</a>
						<!-- Delete Button -->
						<a href="/asset_maintenance/delete/{{ maintenance.maintenance_id }}" class="btn btn-sm btn-danger">Delete</a>
					</td>
				</tr>

				<!-- Collapsible edit form row -->
				<tr class="collapse" id="editAssetMaintenance{{ maintenance.maintenance_id }}">
					<td colspan="6">
						<div class="card card-body">
							<form method="post" action="/asset_maintenance/edit/{{ maintenance.maintenance_id }}">
								<div class="row g-3">

									<div class="col-md-4">
										<label for="maintenance_date_{{ maintenance.maintenance_id }}" class="form-label">Maintenance Date</label>
										<input type="date" id="maintenance_date_{{ maintenance.maintenance_id }}" name="maintenance_date"
											   class="form-control" value="{{ maintenance.maintenance_date }}" required>
									</div>

									<div class="col-md-4">
										<label for="performed_by_{{ maintenance.maintenance_id }}" class="form-label">Performed By</label>
										<input type="text" id="performed_by_{{ maintenance.maintenance_id }}" name="performed_by"
											   class="form-control" value="{{ maintenance.performed_by or '' }}">
									</div>

									<div class="col-md-4">
										<label for="cost_{{ maintenance.maintenance_id }}" class="form-label">Cost</label>
										<input type="number" step="0.01" id="cost_{{ maintenance.maintenance_id }}" name="cost"
											   class="form-control" value="{{ maintenance.cost or '' }}">
									</div>

									<div class="col-md-12">
										<label for="description_{{ maintenance.maintenance_id }}" class="form-label">Description</label>
										<textarea id="description_{{ maintenance.maintenance_id }}" name="description" class="form-control"
												  rows="2">{{ maintenance.description or '' }}</textarea>
									</div>

									<div class="col-md-4">
										<label for="next_due_date_{{ maintenance.maintenance_id }}" class="form-label">Next Due Date</label>
										<input type="date" id="next_due_date_{{ maintenance.maintenance_id }}" name="next_due_date"
											   class="form-control" value="{{ maintenance.next_due_date or '' }}">
									</div>
								</div>

								<div class="mt-3">
									<button type="submit" class="btn btn-sm btn-success">Save</button>
								</div>
							</form>
						</div>
					</td>
				</tr>


			{% endfor %}
		</tbody>
	</table>
</div>

{% endblock %}